<template>
	<view class="tui-addr-box">
		<form :report-submit="true">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">收货人</view>
					<input placeholder-class="tui-phcolor" 
                        class="tui-input" name="name" v-model="name"
                        placeholder="请输入收货人姓名" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">手机号码</view>
					<input placeholder-class="tui-phcolor" 
                        class="tui-input" name="mobile" v-model="tel"
                        placeholder="请输入收货人手机号码" maxlength="11"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
					<input placeholder-class="tui-phcolor" class="tui-input" @click="showAddress=true"
                        disabled name="city" placeholder="请选择城市" v-model="provinceId" maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">收货地址</view>
					<input placeholder-class="tui-phcolor" 
                        class="tui-input" name="address" v-model="detailed"
                        placeholder="请输入详细的收货地址" maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-cell-title">地址类型</view>
					<view class="tui-addr-label">
						<text
							v-for="(item, index) in lists"
							:key="item.value"
							class="tui-label-item"
							@tap="addressTypeClickHandle(item)"
							:class="{'tui-label-active': addressType === item.value}">
						{{item.label}}
					</text>
					</view>
				</view>
			</tui-list-cell>

			<!-- 默认地址 -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-swipe-cell">
					<view>设为默认地址</view>
					<switch :checked='isDefault' color="#19be6b" @change="switchChange" class="tui-switch-small" />
				</view>
			</tui-list-cell>
			<!-- 保存地址 -->
			<view class="tui-addr-save">
				<tui-button shadow type="danger" @click="handleSaveAddress" height="88rpx" shape="circle">保存收货地址</tui-button>
			</view>
			<view class="tui-del" v-if="false">
				<tui-button shadow type="gray" height="88rpx" shape="circle">删除收货地址</tui-button>
			</view>


            <!-- 地址选择 -->
            <tui-bottom-popup :show="showAddress" backgroundColor="transparent" @close="handleCloseDialog">
                <view class="tui-header">
                    <view>配送至</view>
                    <icon type="clear" :size="16" color="#c0c0c0" class="tui-icon-close" @tap="handleCloseDialog"></icon>
                </view>
                <tui-cascade-selection :size="26" :textSize="24" 
                    :itemList="itemList" :reset="reset" 
                    @complete="complete"></tui-cascade-selection>
            </tui-bottom-popup>
		</form>
	</view>
</template>

<script>
    const cityData = require('@/utils/picker.city.js');
	export default {
		data() {
			return {
                lists: [
					{ label: "公司", value: 1 },
					{ label: "家", value: 0 },
					{ label: "学校", value: 2 },
					{ label: "其他", value: 3 }
				],
                name: '',
                tel: '', 
                isDefault: true, 
                detailed: '',       // 详细地址
                editType: 'ADD',
                itemList: cityData,
                reset: 0,
                showAddress: false,
                provinceId: '',     // 省份id
                id: '',     // 地址id
				addressType: 0
			}
        },
        onLoad(option){
            const { type } = option
            this.editType = type
            if(type == 'EDIT'){
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
                uni.getStorage({
                    key:'address',
                    success: (e) => {
                        const {
							addressDetail,
							customerId,
							id,
							isDefault,
							provinceId,
							provinceName,
							receviePhone,
							recevierName
						} = e.data

                        this.id = id
                        this.name = recevierName
                        this.tel = receviePhone
                        this.detailed = addressDetail
                        this.isDefault = isDefault
                        this.provinceId = provinceName
                    }
                })
            }
        },
        methods: {
            handleCloseDialog(){
                this.showAddress=false
            },
			switchChange: function(e) {
				console.log(e.target.value)
				this.isDefault = e.target.value
			},
            complete(e){
                // this.tui.toast('您选择的数据为：' + e.text)
                this.handleCloseDialog()
                setTimeout(()=>{
                    //重置数据
                    this.reset++
                },300)

                this.provinceId = e.text
            },
			addressTypeClickHandle(item) {
				this.addressType = item.value
			},
            async handleSaveAddress(){
                let { name, tel, isDefault, detailed, editType, id, provinceId } = this.$data

                if( !name ){
                    uni.showToast({title:'请输入收件人姓名',icon:'none'});
                    return
                }
                if(!tel){
                    uni.showToast({title:'请输入收件人电话号码',icon:'none'});
                    return
                }
                if(!detailed){
                    uni.showToast({title:'请输入收件人详细地址',icon:'none'});
                    return
                }

                /**
                 *  {   
                 *      "addressDetail":"aasaad",
                 *      "isDefault":0,
                 *      "provinceId":"220102",
                 *      "provinceName":"吉林省-长春市-南关区",
                 *      "receviePhone":"13344445555",
                 *      "recevierName":"阿阿萨说",
                 *      "customerId":"c4505274863346173"
                 *  }
                 * */ 
				 
				 // debugger

                let response
                if( editType === 'ADD' ){
                    response = await this.$api.addAddress({
                        addressDetail: detailed,
                        isDefault: Number(isDefault),
                        provinceId: provinceId,
                        provinceName: provinceId,
                        receviePhone: tel,
                        recevierName: name,
                        customerId: this.$store.state.customerId,
						addressType: this.addressType
                    })
                    uni.showToast({title:'添加成功'})
                    setTimeout(()=>{
                        uni.navigateBack()
                    },1000)
                }else{
                    response = await this.$api.editAddress({
                        addressDetail: detailed,
                        isDefault: Number(isDefault),
                        provinceId: provinceId,
                        provinceName: provinceId,
                        receviePhone: tel,
                        recevierName: name,
                        customerId:this.$store.state.customerId,
                        id,
						addressType: this.addressType
                    })
                    uni.showToast({title:'编辑成功'})
                    setTimeout(()=>{
                        uni.navigateBack()
                    },1000)
                }

            }
        }
	}
</script>

<style>
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}

    .tui-header{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        overflow: hidden;
        position: relative;
    }
    .tui-icon-close{
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
